<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现拖拽排序</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Sortable/1.14.0/Sortable.min.js"></script>

    <div id="team-members">
        <article class="team-member"><img class="team-member-avatar" src="https://www.jq22.com/img/cs/500x500-1.png"
                alt="Team Member" />
            <div class="team-member-name">
                <h3>Cosmo Kramer</h3>
                <p>New York Man of Mystery</p>
            </div>
            <ul class="social-links">
                <li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
            </ul>
        </article>
        <article class="team-member"><img class="team-member-avatar" src="https://www.jq22.com/img/cs/500x500-2.png"
                alt="Team Member" />
            <div class="team-member-name">
                <h3>George Costanza</h3>
                <p>Architect</p>
            </div>
            <ul class="social-links">
                <li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
            </ul>
        </article>
        <article class="team-member"><img class="team-member-avatar" src="https://www.jq22.com/img/cs/500x500-3.png"
                alt="Team Member" />
            <div class="team-member-name">
                <h3>Elaine Benes</h3>
                <p>Writer</p>
            </div>
            <ul class="social-links">
                <li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
            </ul>
        </article>
    </div>

    <script>
        const dragAndDropItems = document.getElementById('team-members');

        new Sortable(dragAndDropItems, {
            animation: 350,
            chosenClass: 'team-member-chosen',
            dragClass: 'team-member-drag'
        });
    </script>
</body>

</html>